import React from 'react';
import Api from 'Utils/api';
import dialog from 'Utils/dialog';
import { RESOURCE_HOST } from 'Constants/config';
import './../VRPage/index.scss';

class VrDetail extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      VideoId: props.params.id,
      record: {}
    }
  }
  componentWillMount() {
    this.initData();
  }
  initData() {
    const api = new Api({
      method: 'GET',
      path: `/documents/${this.state.VideoId}`,
      success: (json) => {
        this.setState({
          record: json,
        });
      },
      error: (msg) => {
        const buttons = [
          {
            label: '知道了',
            onClick: () => {},
          },
        ];
        dialog.open('提示', msg, buttons, 'center');
      }
    });
    api.run();
  }
  returnVideo() {
    const { record } = this.state;
    const src = record.media ? `${RESOURCE_HOST}mobile/${record.media}` : '';
    return (
      <video id="videoWrap" className="video-play" src={src} controls preload autoPlay>
      </video>
    );
  }
  render() {
    const { record } = this.state;
    return (
      <div className="vr-detail-page">
        <div className="video-wrap" >
          {
            record.media ? this.returnVideo() : ''
          }
        </div>
        <div className="vr-wrap">
          <div className="vr-title">
            { record.title || ''}
          </div>
          <div className="vr-content">
            {record.content ? <span dangerouslySetInnerHTML={{ __html: record.content.replace(/\n/g, '<br/>') }} /> : ''}
          </div>
        </div>
      </div>
    )
  }
}

export default VrDetail;
